<template>
  <div class="sp">
    <section style="margin-bottom: 50px">
      <Table
        :tableData="paneB.tableDataF"
        selection
        @btnClick="dialogVisible = true"
      ></Table>
      <Pagination :total="paneB.tableDataF.row.length" />
    </section>

    <el-dialog
      title="流程"
      :visible.sync="dialogVisible"
      width="40%"
      append-to-body
    >
      <el-steps
        :space="200"
        :active="active"
        finish-status="success"
        align-center
      >
        <el-step title="创建"></el-step>
        <el-step title="400平台开通主产品"></el-step>
        <el-step title="400平台开通从产品"></el-step>
        <el-step title="归档"></el-step>
      </el-steps>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Table,
    Pagination
  },
  data() {
    return {
      active: 1,
      dialogVisible: false,
      paneB: {
        tableDataF: {
          col: [
            {
              prop: 'colA',
              label: '订单编号'
            },
            {
              prop: 'colB',
              label: '客户名称'
            },
            {
              prop: 'colC',
              label: '业务名称'
            },
            {
              prop: 'colD',
              label: '状态'
            },
            {
              prop: 'colE',
              label: '创建时间'
            },
            {
              prop: 'colF',
              label: '操作',
              type: 'Button',
              btnList: [
                {
                  label: '查看流程图'
                }
              ]
            }
          ],
          row: [
            {
              colA: 'D458623',
              colB: '方石集团',
              colC: '400业务',
              colD: '开通中',
              colE: this.$baseFunc.dateFormat('YYYY-mm-dd', new Date())
            },
            {
              colA: 'D458622',
              colB: '耕升公司',
              colC: '400业务',
              colD: '开通中',
              colE: '2020-11-12'
            },
            {
              colA: 'D458621',
              colB: '利来集团',
              colC: '400业务',
              colD: '开通中',
              colE: '2020-11-12'
            },
            {
              colA: 'D458620',
              colB: '美孚公司',
              colC: '400业务',
              colD: '开通中',
              colE: '2020-11-12'
            },
            {
              colA: 'D458619',
              colB: '盛运公司',
              colC: '400业务',
              colD: '开通中',
              colE: '2020-11-12'
            }
          ]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
